import {PropType, CSSProperties} from 'vue'
import {FormRules} from 'element-plus'
import {Dictionary, ClassType, SeleteData, TreeData, DateFormat, DatePicker} from '@/api/config'
import { Dayjs } from 'dayjs'
/** 抽屉表单 */

//搜索表单项类型
export type SearchFormItemType='input'|'inputNumber'|'selete'|'seleteV2'|'seleteIcon'|'seleteTree'|'radio'|'date'|'antdDate'|'antdRange'|'slot'|'textarea'

//搜索表单项配置
export interface BaseFormItem{
  label:string //标签
  type:SearchFormItemType //类型
  prop:string //表单验证项
  hideItem?:boolean //隐藏项目
  placeholder?:string|Array<string> //提示
  name?:string //标识
  notClearable?:boolean //不能清空
  disabled?:boolean //禁用
  style?:CSSProperties //内联样式
  class?:ClassType //Class样式
}

//插槽
export interface FormSolt extends BaseFormItem{
  type:'slot',
  slotName:string //插槽名称
}

//输入框
export interface FormInput extends BaseFormItem{
  type:'input'
  inputType?:'textarea'|'text'
  placeholder?:string
  enterSubmit?:boolean //是否回车提交表单
  showPassword?:boolean //密码模式
  autofocus?:boolean //自动聚焦
  maxlength?:number
}

//数字输入框
export interface FormInputNumber extends BaseFormItem{
  type:'inputNumber'
  step:number //步进
  placeholder?:string
  max?:number //最大值
  min?:number //最小值
  notStrictly?:boolean //不按照严格进步模式
  enterSubmit?:boolean //是否回车提交表单
  autofocus?:boolean //自动聚焦
}

//选择器
export type RemoteMethod=(query:string)=>void
//自定义搜索
export interface RemoteConfig{
  remote:boolean //开启自定义搜索
  remoteMethod:RemoteMethod|null //加载函数
  loading:boolean //加载
}
export interface FormSelete extends BaseFormItem{
  type:'selete'
  seleteData:Array<SeleteData> //下拉数据
  placeholder?:string
  changeSubmit?:boolean //是否选择后提交表单
  multiple?:boolean //是否为多选模式
  multipleLimit?:number //多选限制数
  filterable?:boolean //是否带搜索功能
  remoteConfig?:RemoteConfig //自定义搜索配置
}

//选择图标(业务化定制)
export interface FormSeleteIcon extends BaseFormItem{
  type:'seleteIcon'
  seleteData:Array<string> //图标数据
  placeholder?:string
  changeSubmit?:boolean //是否选择后提交表单
  multiple?:boolean //是否为多选模式
  multipleLimit?:number //多选限制数
  filterable?:boolean //是否带搜索功能
}

//虚拟选择器 数据过多(上千条时推荐使用)
export interface FormSeleteV2 extends BaseFormItem{
  type:'seleteV2'
  seleteData:Array<SeleteData> //下拉数据
  placeholder?:string
  changeSubmit?:boolean //是否选择后提交表单
  multiple?:boolean //是否为多选模式
  multipleLimit?:number //多选限制数
  filterable?:boolean //是否带搜索功能
  remoteConfig?:RemoteConfig //自定义搜索配置
}

//树选择器
export interface FormSeleteTree extends BaseFormItem{
  type:'seleteTree'
  seleteData:TreeData|Array<TreeData> //数据
  placeholder?:string
  changeSubmit?:boolean //改变提交
  multiple?:boolean //是否为多选模式
  showCheckbox?:boolean //显示复选框
  checkStrictly?:boolean //显示复选框时,是否为严格模式
}

//单选
export interface FormRadio extends BaseFormItem{
  type:'radio',
  seleteData:Array<SeleteData> //选择数据 一般为两个
  changeSubmit?:boolean //改变提交
}

//日期时间选择器 TODO
export interface FormDate extends BaseFormItem{
  type:'date'
  dateType:'year'|'month'|'date'|'week'|'datetime'|'datetimerange'|'daterange' //显示类型
  dateFormat:'yyyy-MM-dd'|'yyyy-MM-dd HH:mm:ss'|'yyyy-MM-dd HH:mm' //显示在输入框中的格式
  placeholder?:string
  enterSubmit?:boolean //是否回车提交表单
  defaultTime?:string //选中日期后的默认具体时刻
  rangeSeparator?:string //选择范围时的分隔符
  startPlaceholder?:string //范围选择时开始日期的占位内容
  endPlaceholder?:string //范围选择时结束日期的占位内容
}

export type DisabledDate=(current:Dayjs)=>boolean
export type OpenChange=(open:boolean)=>void
export type CalendarChange=(dates: [string, string])=>void
//antd日期选择器
export interface FormAntdDate extends BaseFormItem{
  type:'antdDate'
  dateFormat:DateFormat //日期格式
  placeholder?:string
  datePicker?:DatePicker //范围选择器
  showTime?:boolean //显示时间
  changeSubmit?:boolean //确认后是否立即触发验证
  disabledDate?:DisabledDate //禁用时间
  openChange?:OpenChange //弹出或关闭回调
  calendarChange?:CalendarChange//待选日期发生变化
}
//antd日期范围选择器
export interface FormAntdRange extends BaseFormItem{
  type:'antdRange'
  dateFormat:DateFormat //日期格式
  placeholder?:Array<string>
  datePicker?:DatePicker //范围选择器
  showTime?:boolean //显示时间
  changeSubmit?:boolean //确认后是否立即触发验证
  disabledDate?:DisabledDate //禁用时间
  openChange?:OpenChange //弹出或关闭回调
  calendarChange?:CalendarChange//待选日期发生变化
}

//搜索表单项
export type FromItem=FormInput|FormInputNumber|FormSelete|FormSeleteV2|FormSeleteIcon|FormSeleteTree|FormRadio|FormAntdDate|FormAntdRange|FormSolt

export type LabelPositionType='left' | 'right' | 'top'

export type DisplayType='grid'|'flex'

export const FormProps = {
  //布局
  display:{
    type:String as PropType<DisplayType>,
    default:'grid'
  },
  //触发表单验证
  validateFlag:{
    type:Boolean,
    required:true
  },
  //触发清除表单
  resetFieldsFlag:{
    type:Boolean,
    required:true
  },
  //表单验证
  rules:{
    type:Object as PropType<FormRules>,
    default:() => { return {} }
  },
  //表单数据
  formData:{
    type:Object as PropType<Dictionary<any>>,
    default:() => { return {} }
  },
  //表单项列表
  formItems:{
    type:Array as PropType<Array<FromItem>>,
    default:() => []
  },
  //每行显示几个表单项
  formLineNum:{
    type:Number,
    default:2
  },
  //标签长度
  labelWidth:{
    type:Number,
    default:70
  },
  //标签位置
  labelPosition:{
    type:String as PropType<LabelPositionType>,
    default:'right'
  },
  //列间距
  colGap:{
    type:Number,
    default:16
  },
  //行间距
  rowGap:{
    type:Number,
    default:20
  },
  //提交前清除空数据
  clearEmpty:{
    type:Boolean,
    default:true
  }
}

export const FormEmits = ['submit', 'inputBlur']